<template>
    <div class="content-box info-items">
      <div v-if="data.matchTypeStr!='跑步'">
        <el-row :gutter="10">
            <el-col :span="12">
                运动类型：{{data.matchTypeStr}}
            </el-col>
            <el-col :span="12">
                竞技水平：{{data.sportingLevelStr&&data.sportingLevelStr.length&& data.sportingLevelStr[0].fieldName|| data.sportingLevelStr }}
            </el-col>
        </el-row>

        <el-row :gutter="10">
            <el-col :span="12">
                所在地区：{{data.provinceStr + ' ' + data.cityStr }}
            </el-col>
            <el-col :span="12">
                <template v-if="data.joinRequireStr && data.joinRequireStr[0].fieldName== '个人'||data.joinRequireStr=='个人'">
                    参赛者数量：{{data.joinNumber }}
                </template>
                <template v-else>
                    <span v-if="data.matchTypeStr=='足球'|| data.matchTypeStr=='篮球'">
                        参赛队伍数量：{{data.joinNumber }} 队
                    </span>
                    <span v-else>
                         参赛组合数量：{{data.joinNumber }} 队
                    </span>
                </template>                
            </el-col>
        </el-row>

        <el-row :gutter="10">
            <el-col :span="12">
                参赛者要求：{{data.joinRequireStr && data.joinRequireStr.length&&data.joinRequireStr[0].fieldName||data.joinRequireStr }}
            </el-col>
            <el-col :span="12">
                赛制人数：{{data.formatNumberTypeStr }}
            </el-col>
        </el-row>

        <el-row :gutter="10">
            <el-col :span="12" v-if="(data.matchTypeStr=='足球'|| data.matchTypeStr=='篮球')&& !isSingle">
                每队报名人数：{{data.playerNumber }}
            </el-col>
            <!--个人-->
             <el-col :span="12" v-else>
                赛制类型：{{data.matchFormatStr&&data.matchFormatStr.length&& data.matchFormatStr[0].fieldName||data.matchFormatStr }}
            </el-col>
            <el-col :span="12">
                报名费用：
                <span v-if="data.isPreview">
                    {{ isNaN(data.groupMoney)? "免费":data.groupMoney+'元'  }}
                </span>
                <div class="inline" v-else-if="!data.isPreview && data.groupTypeList && data.groupTypeList[0].groupMoney > 0">                   
                      {{data.groupTypeList[0].groupMoney | formatMoney}}
                </div>
                <div v-else class="inline">
                  免费
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="12">
                报名时间：{{ data.signStartTime && new Date(data.signStartTime).format() }} - {{ data.signEndTime&&new Date(data.signEndTime).format() }}
            </el-col>
            <el-col :span="12">
                比赛时间：{{ data.startTime && new Date(data.startTime).format() }} - {{data.endTime&&new Date(data.endTime).format() }}
            </el-col>
        </el-row>

        <el-row :gutter="10">
            <el-col :span="12">
                联系人：{{data.linkMan }}
            </el-col>
            <el-col :span="12">
                联系方式：{{data.contactWay }}
            </el-col>
        </el-row>
        <!--  -->
        <el-row :gutter="10"  v-if="!isSingle"> 
            <el-col :span="24">
                赛制类型：{{data.matchFormatStr&&data.matchFormatStr.length&& data.matchFormatStr[0].fieldName||data.matchFormatStr }}
            </el-col>
        </el-row>

        <el-row :gutter="10">
            <el-col :span="4">
                主办单位：
            </el-col>
            <el-col :span="20" v-html="data.sponsorsList ?data.sponsorsList.join('<br/>'):''">

            </el-col>
        </el-row>

        <el-row :gutter="10">
            <el-col :span="4">
                承办单位：
            </el-col>
            <el-col :span="20" v-html="data.organizersList ?data.organizersList.join('<br/>'):''">

            </el-col>
        </el-row>

        <el-row :gutter="10">
            <el-col :span="4">
                协办单位：
            </el-col>
            <el-col :span="20" v-html="data.corganizersList ?data.corganizersList.join('<br/>'):''">

            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="4">
                赛事详情(选填)：
            </el-col>
            <el-col :span="20">
                <p class="word-break" v-html="data.matchDetails "></p>
            </el-col>
        </el-row>
      </div>  
        
      <div v-else class="run">
        <h2>赛事基本信息</h2>
        <el-row>
          <label>运动类型：</label><span>跑步</span>
        </el-row>  
        <el-row>
          <label>所在地区：</label><span>{{data.provinceStr + ' ' + data.cityStr}}</span>
        </el-row>
        <el-row>
          <label>参赛者数量：</label><span>{{data.joinNumber}}人</span>
        </el-row>  
         <el-row>
          <label>参赛者要求：</label><span>个人</span>
        </el-row>
         <el-row>
          <label>比赛时间：</label><span>{{ data.startTime && new Date(data.startTime).format() }} - {{data.endTime&&new Date(data.endTime).format() }}</span>
        </el-row>  
         <el-row>
          <label>报名截止时间：</label><span>{{data.signStartTime && new Date(data.signStartTime).format()}} - {{data.signEndTime&&new Date(data.signEndTime).format()}}</span>
        </el-row>    

        <h2>参赛相关信息</h2>
        <el-row>
          <el-col :span="3">
            <label>报名费用：</label>
          </el-col>
          <el-col :span="3" >  
            <div v-if="data.isPreview">
                <p class="hidden" v-for="item in data.groupTypeList" :key="item">
                    {{item||item.groupTypeStr}}：
                </p> 
            </div>
            <div v-else>
              <template v-if="data.groupTypeList">
                <p  v-for="item in data.groupTypeList" :key="item">
                    {{item.groupName}}
                </p>  
              </template>  
              <template v-else>
                <p  v-for="item in data.matchGroupMappingRespList" :key="item">{{item.groupTypeStr||item}}：</p> 
              </template>
            </div>     
          </el-col>          
          <el-col :span="3">
            <div v-if="data.isPreview">
              <p  v-for="item in data.groupTypeMoneyList"  :key="item">
                  {{item.groupMoney||(item>0? item + '元': '免费') }}
              </p>
            </div>
            <div v-else>
              <p  v-for="item in data.groupTypeList"  :key="item">
                <span v-if="item.groupMoney&&item.groupMoney==0">免费</span>
                <span v-else>
                  {{item.groupMoney|formatMoney}}
                </span>
              </p>
            </div>
          </el-col>
        </el-row>  

        <el-row>
          <el-col :span="3">
            <label>报名渠道：</label>
          </el-col>
          <el-col :span="20">  
            <div>
              <p v-for="item in data.matchChannelsList" :key="item">{{item.channelName}}</p>
            </div>            
          </el-col>          
        </el-row>          
        <el-row>
          <label>赛制类型：</label>
          <span>{{'计时赛'}}</span>       
        </el-row> 
        <el-row>
          <label>摇号轮次：</label>
          <span>{{data.channelsRound }}</span>       
        </el-row> 
        <el-row>
          <label>联系人：</label>
          <span>{{data.linkMan }}</span>       
        </el-row> 
        <el-row>
          <label>联系方式：</label>
          <span>{{data.contactWay }}</span>       
        </el-row> 

        
        <h2>其他信息</h2>
        <el-row>
          <el-col :span="4">
            主办单位：
          </el-col>
          <el-col :span="20">
            <p v-for="item in data.sponsorsList" :key="item">{{item}}</p>
          </el-col>   
        </el-row> 

        <el-row>
            <el-col :span="4">
                承办单位：
            </el-col>
            <el-col :span="20" >
              <p v-for="item in data.organizersList" :key="item">{{item}}</p>
            </el-col>
        </el-row>

        <el-row>
          <el-col :span="4">
                协办单位：
            </el-col>
            <el-col :span="20" >
              <p v-for="item in data.corganizersList" :key="item">{{item}}</p>
            </el-col>
        </el-row>

        <el-row>
          <el-col :span="4">
                赛事详情：
            </el-col>
            <el-col :span="20">
              <p class="word-break"  v-html="data.matchDetails" ></p>
            </el-col>
        </el-row>

      </div>
      <preview-box>
        <el-carousel
              v-if="data.matchImagesList&&data.matchImagesList.length"
              height="320px"
              :slides="3"
              :autoplay="false"
              indicator-position="outside">
          <x-carousel-item class="carousel-item" v-for="item in data.matchImagesList" :key="item">
              <img class="carousel-img" v-bind:src="item">
          </x-carousel-item>
        </el-carousel>
      </preview-box>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    props: {
      data: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    computed: {
      ...mapGetters({
        global: 'global'
      }),
      isSingle () {
        return this.data.joinRequireStr == '个人' || (this.data.joinRequireStr && this.data.joinRequireStr[0].fieldName == '个人') // eslint-disable-line
      },
      isDouble () {
        return this.data.joinRequireStr == '双人' || (this.data.joinRequireStr && this.data.joinRequireStr[0].fieldName == '双人') // eslint-disable-line
      }
    },
    data () {
      let myData = this.data
      return {
        myData
      }
    }
  }
</script>

<style lang="scss" scoped>
    .info-items {
        .el-row {
            margin-bottom: 40px;
        }
        .el-col {
            min-height: 10px;
        }
        .el-col-4 {
            width: auto
        }
    }
    .run{
      h2{
        font-size: 18px;
        color:#333;
        font-weight: 700;
        margin:60px 0 20px;
      }
      .el-row {
          margin-bottom: 20px;
          p{
            margin-bottom: 10px;
          }
      }
    }
    .info-items {
      p{
        max-width: 100%;
      }
    }
    .word-break{
      word-break: break-word;
      word-break: break-all;
      img{
          max-width: 100%;
      }
    }
    
</style>
<style>
 .el-row div img{
   max-width:100%;
 }
 .inline{
   display:inline-block;
 }
</style>
